import './App.css';
// 1.导入路由
// import { BrowserRouter as Router, Routes,Route,Outlet, Link } from 'react-router-dom';
import { createBrowserRouter, RouterProvider,Outlet, useNavigate} from 'react-router-dom';
import { ConfigProvider } from 'antd';
import zh_CN from 'antd/es/locale/zh_CN';

//通过数组方式，动态创建 路由
import {useSelector} from "react-redux";
import React, { lazy, Suspense } from 'react'

function App() {
    // 获取
    const publicRoutes = useSelector((state)=>state.accountGroup.publicRoutes)   //公共
    const privateRoutes = useSelector((state)=>state.accountGroup.privateRoutes) //私有
  

    // 将公共路由和私有路由合并成一个完整的路由配置
    const routes = [...publicRoutes, ...privateRoutes];
    console.log("App",routes)

    // 获取store
    const router = createBrowserRouter(routes); //创建路由实例
    console.log("router",router)

    return (
        <ConfigProvider locale={zh_CN}>
              <div className="shop">
                    <RouterProvider router={router} />
                    {/* <Router>
                        <Routes>
                        {routes.map((route, index) => (
                            <Route
                                key={index}
                                path={route.path}
                                element={lazy(() => import(route.render))}
                            >
                                {route.children && route.children.map((child, idx) => (
                                <Route
                                    key={idx}
                                    path={`${route.path}/${child.path}`}
                                    element={lazy(() => import(route.render))}
                                />
                                ))}
                            </Route>
                            ))}
                        </Routes>
                    </Router> */}
                    {/* 类似vue-router中的 <router-view /> /login 、/admin */}
                    <Outlet />
              </div>
        </ConfigProvider>
    );
}

export default App;
